<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="first">首页->专项监督->公车监督</div>
            <div class="line"></div>
            <Row>
                <Col span="6">
                    <left-button :list="buttonList"></left-button>
                </Col>
                <Col span="18">
                    <div class="gray">&nbsp;&nbsp;&nbsp;公车监督</div>
                    <div class="top">
                        <Select v-model="unitName" style="width:300px" filterable clearable>
                            <Option v-for="item in Community" :value="item.vehicle_user_unit" :key="item.id">{{
                                item.vehicle_user_unit }}
                            </Option>
                        </Select>
                        <Input v-model="carNumber" class="top-header" placeholder="输入车牌号" style="width: 308px"/>
                        <Button class="top-select" @click="search">查询</Button>
                    </div>
                    <div class="table">
                        <Table border :columns="columns1" :data="data1" class="columns">
                            <template slot="action">
                                <Button size="small" class="actionBtn">查看/举报</Button>
                            </template>
                        </Table>
                    </div>
                    <div class="page">
                        <Page :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                              show-total @on-change="pageChange"/>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import {
  getBusSupervisionList,
  getCompanyNameList
} from '@/api/site'
import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import LeftButton from '../complaints-report/components/left-button/index'

export default {
  components: { LeftButton, SiteHeader, SiteMenus },
  data () {
    return {
      tableLoading: false,
      buttonList: [
        {
          content: '公车监督'
        }
      ],
      Community: [],
      columns1: [
        {
          title: '车辆使用单位',
          align: 'center',
          key: 'vehicle_user_unit',
          width: 150
        },
        {
          title: '品牌',
          align: 'center',
          key: 'vehicle_brand',
          width: 120
        },
        {
          title: '名称',
          align: 'center',
          key: 'vehicle_name',
          width: 120
        },
        {
          title: '车牌号',
          align: 'center',
          key: 'car_number',
          width: 140
        },
        {
          title: '排气量（L）',
          align: 'center',
          key: 'discharge_volume',
          width: 120
        },
        {
          title: '车辆分类',
          align: 'center',
          key: 'vehicle_classes',
          width: 120
        },
        {
          title: '购置日期',
          align: 'center',
          key: 'buy_date',
          width: 140
        },
        {
          title: '油箱容量（升）',
          align: 'center',
          key: 'tank_capacity',
          width: 140
        },
        {
          title: '2018年耗油量（升）',
          align: 'center',
          key: 'oil_consumption',
          width: 140
        },
        {
          title: '2018年维修费（元）',
          align: 'center',
          key: 'upkeep',
          width: 140
        },
        {
          title: '车辆状态',
          align: 'center',
          key: 'vehicle_state',
          width: 140
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 140
        }
      ],
      data1: [],
      value: '',
      unitName: '',
      carNumber: '',
      page: 1,
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 1
      }
    }
  },
  methods: {
    init (data) {
      this.tableLoading = true
      getBusSupervisionList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.data1 = data.data.list.data
          this.pageObj.totalRecord = data.data.list.total
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.$Modal.error({
            title: '获取数据失败！'
          })
        }
      })
    },
    getNameList () {
      getCompanyNameList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.Community = ret.data.data.list
        } else {
          this.$Modal.error({
            title: '获取数据失败'
          })
        }
      })
    },
    search () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
      const data = {
        ...this.pageObj,
        vehicle_user_unit: this.unitName,
        car_number: this.carNumber
      }
      this.init(data)
    },
    pageChange (e) {
      this.pageObj.page = e
      const data = {
        ...this.pageObj,
        vehicle_user_unit: this.unitName,
        car_number: this.carNumber
      }
      this.init(data)
    }
  },

  mounted () {
    this.$refs.menus.changeColor = this.$route.query.index
    this.init(this.pageObj)
    this.getNameList()
  }
}
</script>
<style scoped lang="less">
    .home-page {
        height: 100%;
        overflow: scroll;
    }

    .content {
        height: 1000px;
        width: 94%;
        margin-left: 3%;
    }

    .first {
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }

    .line {
        height: 5px;
        background-color: #0166b6;
    }

    .mode {
        font-weight: bolder;
        margin-left: 20px;
        margin-top: 20px;
        height: 70px;
        width: 300px;
        border: 3px #0166b6 solid;
        font-size: 20px;
        color: #0166b6;
        line-height: 70px;
        text-align: center;
    }

    .gray {
        height: 50px;
        background-color: #EEECED;
        line-height: 50px;
        font-size: 20px;
        color: #0166b6;
    }

    .top {
        margin-top: 30px;

        &-header {
            margin-left: 20px;
        }

        &-select {
            margin-left: 20px;
            width: 150px;
            background-color: #0166b6;
            color: white;
        }
    }

    .columns /deep/ tr {
        height: 55px;
    }

    .actionBtn {
        background-color: #2E87CB;
        color: white;
    }

    .table {
        margin-top: 20px;
    }

    .page {
        text-align: center;
        margin-top: 20px;
    }
</style>
